<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import SysNoticePanel from '@/components/business-component/SysNoticePanel.vue'
import { allMessageRead } from '@/api/interface/message'

const popoverVisible = ref(false)

const noticePanelAlive = ref(false)

const isDot = ref(false)

const getIsRead = () => {
  // getMessageIsRead({}).then((res: any) => {
  //   if (res.isRead == 1) {
  //     isDot.value = true
  //   } else {
  //     isDot.value = false
  //   }
  // })
}

let st: any = null

watch(popoverVisible, (newVal) => {
  if (newVal) {
    if (st) {
      clearTimeout(st)
      st = null
    }
    noticePanelAlive.value = newVal
  } else {
    allMessageRead({}).then(() => {
      getIsRead()
    })
    st = setTimeout(() => {
      noticePanelAlive.value = newVal
    }, 600)
  }
})

let si: any = null

onMounted(() => {
  getIsRead()
  si = setInterval(() => {
    getIsRead()
  }, 12000)
})

onUnmounted(() => {
  if (si) {
    clearInterval(si)
    si = null
  }
})
</script>

<template>
  <el-popover
    v-model:visible="popoverVisible"
    placement="bottom"
    :width="375"
    trigger="click"
    :show-arrow="false"
    :popper-style="{
      padding: 0
    }"
  >
    <template #reference>
      <div class="nav-notice-wrapper">
        <el-badge :is-dot="isDot">
          <div class="ring-ring-ring"></div>
        </el-badge>
      </div>
    </template>
    <SysNoticePanel v-if="noticePanelAlive"></SysNoticePanel>
  </el-popover>
</template>

<style lang="scss" scoped>
.nav-notice-wrapper {
  width: auto;
  height: auto;
  cursor: pointer;
  :deep(.el-badge__content) {
    border: none;
  }
  :deep(.el-badge__content.is-fixed.is-dot) {
    top: 5px;
    right: 6px;
  }
  .ring-ring-ring {
    @include rect(20px, 24px);
    @include background-image('./imgs/bell.png', 100%, 100%);
  }
}
</style>
